<template>
	<view class="detail">
		<view class="title">
			{{message.title}}
			<view class="border"></view>
		</view>

		<view class="content">
			<text user-select="true">{{message.content}}</text>
		</view>
		<view class="btn" v-if="btn" @click="copy">
			<view class="web">
				<text>复制网页</text>
			</view>
		</view>
		<view class="btn" v-else @click="copy">
			<view class="web">
				<text>复制内容</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btn: false,
				message: {
					title: '',
					content: '',
				}
			}
		},
		onLoad(param) {
			this.token = uni.getStorageSync("merchantsToken").token
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.message.title = param.title
			this.message.content = param.content
			if (this.message.content.indexOf("http") != -1) {
				this.btn = true
			}
			this.message.id = param.id
			this.read(this.message.id)
		},

		methods: {
			copy() {
				let text = "";
				if (this.btn) {
					//复制网页
					let end = this.message.content.lastIndexOf("/")
					let start = this.message.content.indexOf("h")
					text = this.message.content.slice(start, end)
				} else {
					text = this.message.content
				}
				
				uni.setClipboardData({
					data: text, //要复制的内容
					success: res => {
						uni.showToast({
							title: this.btn ? '网页已复制' : '内容已复制',
							icon: 'none',
							mask: true
						})
					}
				})
			},

			read(id) {
				this.$axios({
					url: "us/merchantOperation/read",
					method: "post",
					data: {
						id: id
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantToken"
					},
				}).then((res) => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.title {
		margin: 10rpx 0 10rpx 5rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #587dab;

		.border {
			position: absolute;
			border-style: solid;
			border-width: 1rpx;
			border-left: none;
			border-top: none;
			border-color: #afafaf2e;
			border-right: none;
			width: 600rpx;
			margin-top: 15rpx;
		}
	}

	.content {
		font-weight: 300;
		margin-top: 30rpx;
		line-height: 50rpx;
	}

	.detail {
		padding: 30rpx;
	}

	.btn {
		background-color: #3557a2;
		width: 350rpx;
		letter-spacing: 6rpx;
		border-radius: 17rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: auto;
		margin-top: 200rpx;
		color: #fff;
		font-size: 35rpx;
		font-weight: 900;
	}
</style>
